{% extends "base.html" %}
{% from "_when.html" import when_field with context %}
{% from "_kit_fields.html" import spec_fields with context %}
{% block title %}Kit · {{ app_name }}{% endblock %}
{% block body %}
<h1>🦴 Kit <a class="gear" href="/settings#kit" title="kit settings">⚙</a></h1>

<p class="hint">
  {{ totals.owned }} owned · {{ totals.by_kind.toy }} toy{{ '' if totals.by_kind.toy == 1 else 's' }} ·
  {{ totals.by_kind.gear }} gear ·
  {{ totals.by_kind.consumable }} consumable{{ '' if totals.by_kind.consumable == 1 else 's' }}
  {%- if totals.wishlist %} · {{ totals.wishlist }} on the wishlist{% endif %}
  {%- if totals.bouts %} · {{ totals.bouts }} bouts · {{ totals.seconds|dur }}{% endif %}
  {%- if totals.priced %} · {{ cur }}{{ '%.2f'|format(totals.spend_cents / 100) }} spent
    <small>(of {{ totals.priced }} you priced)</small>{% endif %}
</p>

{# ── what is on right now ────────────────────────────────────────────────── #}
{% if open %}
<section class="card need">
  <h3>On right now</h3>
  {% for b in open %}
  <div class="bout">
    <div class="bout-head">
      <b>{{ b.things|map(attribute='name')|join(' · ') }}</b>
      <span class="badge">{{ '🦴 play' if b.kind == 'play' else '🧺 wear' }}</span>
      {% if b.locked %}<span class="badge">🔒 caged</span>{% endif %}
      {% if b.source == 'session' %}<span class="badge actor">auto</span>{% endif %}
    </div>
    <p class="hint">on since {{ b.started_at|local }} · {{ (now - b.started_at)|dur }}</p>
    <div class="row">
      <a class="btn primary" href="/kit/bout/{{ b.id }}/end">
        {{ '🧺 take it off' if b.kind == 'wear' else '🦴 finish up' }}</a>
      <form method="post" action="/kit/bout/{{ b.id }}/cancel"
            onsubmit="return confirm('Discard this bout? Nothing about it is recorded.')">
        <button class="small">✕ discard</button></form>
    </div>
  </div>
  {% endfor %}
</section>
{% endif %}

{% if stale %}
{#- 🔴 Reported, never auto-closed. The app does not know when you took it off and will
    not invent an end time — see service.stale_bouts. -#}
<p class="hint quiet">⚠ {{ stale|length }} play bout{{ '' if stale|length == 1 else 's' }} still open
  since {{ stale[0].started_at|rel(now) }}. Finish it with the real time, or discard it —
  nothing will guess an end for you.</p>
{% endif %}

<section class="grid2">
  {# ── start a bout ───────────────────────────────────────────────────────── #}
  {#- 🔴 A REFUSED SAVE COMES BACK FILLED IN (#40, web/kept.py). `kv` reads what a refused
      form sent, only for that form's own action; rendered server-side, so the words are in
      the page whether or not JavaScript runs. -#}
  {%- macro kv(action, name, default='') -%}{{ kept.value(action, name, default) }}{%- endmacro -%}
  {%- macro kept_err(action) -%}{% if kept.on(action) %}<p class="flash err kept">{{ kept.err }}</p>{% endif %}{%- endmacro -%}
  {%- macro kind_pick(action) -%}
  {%- set k = kv(action, 'bout_kind', 'play') -%}
  <div class="chips pick">
    <label class="chip"><input type="radio" name="bout_kind" value="play" {{ 'checked' if k != 'wear' }}> 🦴 play</label>
    <label class="chip"><input type="radio" name="bout_kind" value="wear" {{ 'checked' if k == 'wear' }}> 🧺 wear</label>
  </div>
  {%- endmacro -%}
  {%- macro item_pick(action) -%}
  {%- set on = kept.values(action, 'item_id') -%}
  <div class="chips pick">
    {% for i in playable %}
    <label class="chip"><input type="checkbox" name="item_id" value="{{ i.id }}"{{ ' checked' if i.id|string in on }}>
      {{ i.cat_icon }} {{ i.name }}</label>
    {% else %}<p class="hint">Nothing owned yet. Add something below.</p>{% endfor %}
  </div>
  {%- endmacro -%}
  <div class="card" id="now">
    <h3>Put something on</h3>
    {#- 🔴 Say which is which (#41): the two kinds are measured differently, and the page used
        to leave the pup to guess from a dropdown. -#}
    <p class="hint"><b>🦴 Play</b> is a session that ends somehow — you say how, and answer the
      questions. <b>🧺 Wear</b> is time something is on — the hours are the point. Start one
      <b>now</b> and finish it when it comes off, or <a href="#earlier">📝 log one from earlier</a>.</p>
    {% set a = '/kit/start' %}
    <form method="post" action="{{ a }}"{% if kept.on(a) %} data-kept="server"{% endif %}>
      {{ kept_err(a) }}
      {{ item_pick(a) }}
      {{ kind_pick(a) }}
      <div class="row">
        <label>Note <input name="note" placeholder="optional" value="{{ kv(a, 'note') }}"></label>
        <button class="primary" {{ 'disabled' if not playable }}>Start now</button>
      </div>
      {{ when_field('⏱ started earlier and it’s still on? set the time', value=kv(a, 'when')) }}
    </form>
  </div>

  {# ── 📝 a whole bout from earlier (#41) ─────────────────────────────────── #}
  <div class="card" id="earlier">
    <h3>📝 Log one from earlier</h3>
    <p class="hint">Done and dusted? Tell it in one go — it lands at the time it happened,
      marked <b>↶ logged later</b>. Local time, {{ tz }}.</p>
    {% set a = '/kit/log' %}
    <form method="post" action="{{ a }}"{% if kept.on(a) %} data-kept="server"{% endif %}>
      {{ kept_err(a) }}
      {{ item_pick(a) }}
      {{ kind_pick(a) }}
      <div class="row">
        <label>From <input type="datetime-local" name="from" step="60" value="{{ kv(a, 'from') }}" required></label>
        <label>To <input type="datetime-local" name="to" step="60" value="{{ kv(a, 'to') }}"></label>
        <label>or lasted <input name="minutes" inputmode="decimal" placeholder="min" style="max-width:6rem" value="{{ kv(a, 'minutes') }}"></label>
      </div>
      <details class="past"{{ ' open' if kept.on(a) }}>
        <summary>🦴 how it ended, the questions, a note</summary>
        <p class="hint">How it ended is for play; wear has no ending to tell.</p>
        {%- set o = kv(a, 'outcome', 'none') %}
        <div class="chips pick outcomes">
          {% for x in outcomes %}
          <label class="chip"><input type="radio" name="outcome" value="{{ x }}" {{ 'checked' if x == o }}>
            {{ {'none': '🚫 nothing', 'edge': '🪢 edged', 'ruined': '💧 ruined', 'squirt': '💦 came'}[x] }}</label>
          {% endfor %}
        </div>
        {#- the same unnamed-until-moved sliders as the end form (kit_end.html); an answer
            comes back only if it was sent -#}
        {% for q in survey %}
        {%- set ans = kv(a, 'score.' ~ q.key) %}
        <div class="checkin ask" data-key="{{ q.key }}">
          <label>{{ q.prompt }}
            <input type="range" data-score="score.{{ q.key }}" min="{{ smin }}" max="{{ smax }}"
                   step="1" {% if ans %}name="score.{{ q.key }}" value="{{ ans }}" class="slider"{% else %}value="{{ ((smin + smax) // 2) }}" class="slider unanswered"{% endif %}>
          </label>
          <div class="askfoot">
            <output class="hint">{{ (ans ~ ' / ' ~ smax) if ans else 'not asked' }}</output>
            <button type="button" class="small clear"{{ '' if ans else ' hidden' }}>× clear</button>
          </div>
        </div>
        {% endfor %}
        {% if lubes %}
        <div class="row">
          <label>Used any of
            <select name="consumable_id">
              <option value="">— nothing —</option>
              {% for c in lubes %}<option value="{{ c.id }}"{{ ' selected' if kv(a, 'consumable_id') == c.id|string }}>{{ c.cat_icon }} {{ c.name }}</option>{% endfor %}
            </select></label>
          <label>How much <input name="consumable_qty" inputmode="decimal" placeholder="e.g. 5" style="max-width:6rem" value="{{ kv(a, 'consumable_qty') }}"></label>
        </div>
        {% endif %}
        <label>Note <textarea name="note" rows="2" placeholder="optional">{{ kv(a, 'note') }}</textarea></label>
      </details>
      <button class="primary" {{ 'disabled' if not playable }}>Log it</button>
    </form>
  </div>

  {# ── the quick log: an outcome without a bout ───────────────────────────── #}
  <div class="card" id="finish">
    <h3>💦 Log a finish</h3>
    {% set a = '/kit/finish' %}
    <form method="post" action="{{ a }}"{% if kept.on(a) %} data-kept="server"{% endif %}>
      {{ kept_err(a) }}
      {%- set o = kv(a, 'outcome', 'squirt') %}{% set cg = kv(a, 'caged', 'auto') %}{% set on = kept.values(a, 'item_id') %}
      <div class="chips pick outcomes">
        <label class="chip"><input type="radio" name="outcome" value="squirt" {{ 'checked' if o == 'squirt' }}> 💦 came</label>
        <label class="chip"><input type="radio" name="outcome" value="ruined" {{ 'checked' if o == 'ruined' }}> 💧 ruined</label>
        <label class="chip"><input type="radio" name="outcome" value="edge" {{ 'checked' if o == 'edge' }}> 🪢 edged</label>
      </div>
      <label>When <input type="datetime-local" name="when" step="60" value="{{ kv(a, 'when') }}"></label>
      <div class="chips pick">
        <label class="chip"><input type="radio" name="caged" value="auto" {{ 'checked' if cg != 'no' }}>
          🔒 caged if I was locked</label>
        <label class="chip"><input type="radio" name="caged" value="no" {{ 'checked' if cg == 'no' }}> 🔓 I was out of the cage</label>
      </div>
      {% if playable %}
      <div class="chips pick">
        {% for i in playable if i.kind == 'toy' %}
        <label class="chip"><input type="checkbox" name="item_id" value="{{ i.id }}"{{ ' checked' if i.id|string in on }}>
          {{ i.cat_icon }} {{ i.name }}</label>
        {% endfor %}
      </div>
      {% endif %}
      <div class="row">
        <label>How long <input name="minutes" inputmode="decimal" placeholder="min, optional" style="max-width:7rem" value="{{ kv(a, 'minutes') }}"></label>
        <label>Note <input name="note" placeholder="optional" value="{{ kv(a, 'note') }}"></label>
        <button class="primary">Log it</button>
      </div>
      <p class="hint">Leave <b>When</b> empty for right now; anything earlier is marked <b>↶ logged later</b>
        (local time, {{ tz }}). Caged comes from the lock at that moment; pick <b>out of the cage</b>
        for a break during a lock. Toys and length are optional.</p>
    </form>
  </div>

  {# ── things that want attention ─────────────────────────────────────────── #}
  <div class="card">
    <h3>Wants attention</h3>
    {% if low %}
    <h4 class="sub">Running out</h4>
    <ul class="mini">
      {% for i in low %}
      <li><a href="/kit/item/{{ i.id }}">{{ i.cat_icon }} {{ i.name }}</a>
        <small class="warn">{{ '%g'|format(i.level) }} {{ i.qty_unit }} left</small></li>
      {% endfor %}
    </ul>
    {% endif %}
    {% if expiring %}
    <h4 class="sub">Going off</h4>
    <ul class="mini">
      {% for i in expiring %}
      <li><a href="/kit/item/{{ i.id }}">{{ i.cat_icon }} {{ i.name }}</a>
        <small class="warn">{{ i.expires_at|local('%Y-%m-%d') }}</small></li>
      {% endfor %}
    </ul>
    {% endif %}
    {% if neglected %}
    <h4 class="sub">Gathering dust</h4>
    <ul class="mini">
      {% for i in neglected[:6] %}
      <li><a href="/kit/item/{{ i.id }}">{{ i.cat_icon }} {{ i.name }}</a>
        <small class="hint">{{ 'last used ' ~ i.last_used|rel(now) if i.last_used else 'never used' }}</small></li>
      {% endfor %}
    </ul>
    {% endif %}
    {% if not low and not expiring and not neglected %}
    <p class="hint">Nothing running low, nothing going off, nothing neglected. Tidy kennel.</p>
    {% endif %}
  </div>
</section>

{# ── the inventory ──────────────────────────────────────────────────────── #}
<div class="chips filters">
  <a class="chip {{ 'on' if not kind and not status }}" href="/kit">all</a>
  {% for k in kinds %}
  <a class="chip {{ 'on' if kind == k }}" href="/kit?kind={{ k }}">{{ kind_icon[k] }} {{ kind_title[k] }}</a>
  {% endfor %}
  <a class="chip {{ 'on' if status == 'wishlist' }}" href="/kit?status=wishlist">✨ wishlist</a>
  <a class="chip {{ 'on' if status == 'retired' }}" href="/kit?status=retired">📕 retired</a>
</div>

<section class="kitgrid">
  {% for i in items %}
  {% set s = stats[i.id] %}
  <a class="kititem {{ 'wish' if i.status == 'wishlist' }} {{ 'gone' if i.status == 'retired' }}"
     href="/kit/item/{{ i.id }}">
    <div class="kitshot">
      {% if i.media_id %}<img src="/media/{{ i.media_id }}/thumb" alt="" loading="lazy">
      {% else %}<span class="noshot">{{ i.cat_icon }}</span>{% endif %}
      {% if badges.get(i.id) %}
      <span class="kitbadges">{% for b in badges[i.id][:3] %}<span title="{{ b.title }} — {{ b.detail }}">{{ b.icon }}</span>{% endfor %}</span>
      {% endif %}
    </div>
    <div class="kitmeta">
      <b>{{ i.name }}</b>
      <small class="hint">{{ i.cat_title }}
        {%- if i.status == 'wishlist' %} · ✨ want{% elif i.status == 'retired' %} · retired{% endif %}</small>
      <small class="hint">
        {%- if i.kind == 'consumable' -%}
          {% if s.level is not none %}{{ '%g'|format(s.level) }} {{ i.qty_unit }} left
          {%- else %}<span class="unknown" title="no stock has ever been logged — not the same as empty">level unknown</span>{% endif %}
        {%- elif s.uses -%}
          {{ s.uses }} bout{{ '' if s.uses == 1 else 's' }}
          {%- if s.total_seconds %} · {{ s.total_seconds|dur }}{% endif %}
          {%- if s.last_used %} · {{ s.last_used|rel(now) }}{% endif %}
        {%- elif i.status == 'wishlist' -%}
          not yours yet
        {%- else -%}
          never used
        {%- endif -%}
      </small>
      {% if s.squirts %}<small class="hint">💦 {{ s.squirts }}{% if s.caged_squirts %} · 🔒 {{ s.caged_squirts }} caged{% endif %}</small>{% endif %}
    </div>
  </a>
  {% else %}
  <p class="hint">Nothing here yet.</p>
  {% endfor %}
</section>

{# ── add ────────────────────────────────────────────────────────────────── #}
<details class="card fold" id="add">
  <summary><b>➕ Add something</b></summary>
  <form method="post" action="/kit/add" id="addform">
    <div class="row">
      <label>Name <input name="name" required placeholder="give it a name — that's half the point"></label>
      <label>Category
        <select name="category" id="catpick" required>
          {% for k in kinds %}
          <optgroup label="{{ kind_icon[k] }} {{ kind_title[k] }}">
            {% for c in by_kind[k] %}<option value="{{ c.slug }}">{{ c.icon }} {{ c.title }}</option>{% endfor %}
          </optgroup>
          {% endfor %}
        </select></label>
      <label>Status
        <select name="status">
          <option value="owned">owned</option>
          <option value="wishlist">✨ wishlist</option>
        </select></label>
    </div>
    <div class="row">
      <label>Price <input name="cost" inputmode="decimal" placeholder="blank = don't remember"></label>
      <label>Bought <input type="date" name="bought_at"></label>
      <label class="check"><input type="checkbox" name="shareable" value="1"> may be named on a share card</label>
    </div>
    <div class="row consumable-only" hidden>
      <label>Opening stock <input name="opening_qty" inputmode="decimal" placeholder="how much is in it"></label>
      <label>Unit <input name="qty_unit" placeholder="ml · g · count"></label>
      <label>Reorder at <input name="reorder_at" inputmode="decimal"></label>
      <label>Expires <input type="date" name="expires_at"></label>
    </div>
    <div id="specs" class="specs">{{ spec_fields(categories) }}</div>
    <label>Notes <textarea name="notes" rows="2"></textarea></label>
    <button class="primary">Add to the kennel</button>
    {{ when_field('⏱ got it earlier? set the date') }}
  </form>
</details>
{% endblock %}

{% block scripts %}
<script>
// Show only the selected category's spec fields, and disable the rest so a hidden
// fieldset cannot post values belonging to a category the item is not.
(function () {
  var pick = document.getElementById('catpick');
  var kinds = {{ cat_kinds|tojson }};
  function sync() {
    var want = pick.value;
    document.querySelectorAll('#specs .specset').forEach(function (el) {
      var on = el.dataset.cat === want;
      el.hidden = !on;
      el.querySelectorAll('input, select, textarea').forEach(function (f) { f.disabled = !on; });
    });
    document.querySelectorAll('.consumable-only').forEach(function (el) {
      el.hidden = kinds[want] !== 'consumable';
    });
  }
  pick.addEventListener('change', sync);
  sync();
})();
</script>
{% endblock %}